<template>
  <div id="can1"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import { CanvasRenderer } from "echarts/renderers";
import { init, use, dispose } from "echarts/core";
import { GridComponent, TooltipComponent } from "echarts/components";
import { ScatterChart } from "echarts/charts";

let data = Array.from({ length: 100000 }, (_, i) => ({
  value: i + 1,
  itemStyle: {
    color: i % 6 === 0 ? "black" : "red",
  },
}));
let page = 0;
let pageSize = 5000
let groupData = [];
let len = Math.ceil(data.length / pageSize);
for (let i = 0; i < len; i++) {
  groupData.push(data.slice(i * pageSize, i * pageSize + pageSize));
}
let myChart = null;
let can1 = null;

onMounted(() => {
  use([CanvasRenderer, GridComponent, TooltipComponent, ScatterChart]);
  can1 = document.getElementById("can1");
  myChart = init(can1);
  let options = {
    xAxis: {},
    yAxis: {},
    tooltip: {},
    series: [
      {
        type: "scatter",
        data: groupData[0],
      },
    ],
  };
  myChart.on("finished", () => {
    page++;
    if (page <= groupData.length) {
      myChart.appendData({
        seriesIndex: 0,
        data: groupData[page],
      });
      // setOption 会整个渲染一次，resize会在之前的基础上继续渲染
      myChart.resize();
    }
  });

  myChart.setOption(options);
});

onUnmounted(() => {
  dispose(can1);
  myChart = null;
});
</script>

<style lang="less" scoped>
#can1 {
  width: 800px;
  height: 400px;
}
</style>
